<script setup lang="ts">
import { createVNode, h } from "vue";
import { CloseOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { HomeCardAliasProps } from "@/views/home/components/cards/types.ts";
import { invoke } from "@tauri-apps/api/tauri";
import { Modal, notification } from "ant-design-vue";

defineOptions({
	name: "HomeCardAliasView",
});

const pops = withDefaults(defineProps<HomeCardAliasProps>(), {
	index: undefined,
	singleRow: () => true,
	close: () => false,
	updateIndexAlias: () => -1,
});
const index = toRef(pops, "index");
const singleRow = toRef(pops, "singleRow");
const aliases = ref<string[]>([]);
const close = toRef(pops, "close");
const updateIndexAlias = toRef(pops, "updateIndexAlias");
const emits = defineEmits(["deleteAlias"]);

watch(index, function () {
	getIndicesAliases();
});

watch(updateIndexAlias, function () {
	getIndicesAliases(true);
});

function getIndicesAliases(refresh: boolean = false) {
	if (index.value) {
		invoke("get_indices_aliases", {
			index: index.value,
			refresh: refresh,
		}).then((data: any) => {
			if (index.value && data[index.value] && data[index.value].aliases) {
				aliases.value = Object.keys(data[index.value].aliases);
			}
		});
	}
}

function handleDelete(alias: string) {
	console.log(alias);
	Modal.confirm({
		title: "是否确定删除此别名?",
		icon: createVNode(ExclamationCircleOutlined),
		content: alias,
		centered: true,
		okText: "确定",
		okType: "danger",
		cancelText: "取消",
		onOk() {
			invoke("action_delete_aliases", { index: index.value, alias: alias }).then((data: any) => {
				notification.info({
					message: "删除索引结果",
					description: JSON.stringify(data, null, "\t"),
					placement: "bottomRight",
				});
				getIndicesAliases(true);
				deleteAlias();
			});
		},
	});
}

const deleteAlias = () => {
	emits("deleteAlias", index.value);
};
onMounted(function () {
	getIndicesAliases();
});
</script>

<template>
	<div class="home-card-alias-view">
		<div class="index-alias-info-item" v-for="(item, index) in aliases" :key="index">
			<div class="index-alias-name" :class="{ 'index-alias-name-multiple-lines': !singleRow }">{{ item }}</div>
			<a-button
				:disabled="close"
				type="text"
				size="small"
				:style="{ fontSize: '9px', color: 'var(--cards-index-addAlias-color)' }"
				@click="handleDelete(item)"
				:icon="h(CloseOutlined)"
				shape="circle"
			/>
		</div>
	</div>
</template>

<style scoped lang="scss">
.home-card-alias-view {
	width: 100%;
}

.index-alias-info-item {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	border: 1px dashed var(--card-index-alias-border-color);
	border-radius: 2px;
	padding-left: 5px;
	margin-bottom: 3px;
}

.index-alias-name {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--card-index-alias-color);
}

.index-alias-name-multiple-lines {
	width: 100%;
	white-space: unset;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}
</style>
